OpenAI API を使ってFigmaからコードを生成するプラグイン
#AI #Figma
@sekikazu01: OpenAI API を使って Figma からコードを生成するプラグインを作っている話を書きました。
コードは GitHub にて公開しているのでぜひお試しください!まだまだ発展途上なので Contribute いただいたりデザインや実装のプロセスの知見磨きなどやっていけると嬉しいです
https://t.co/xlQyhG0l6e
OpenAI API を使ったデザインからコード生成する Figma プラグイン - Gaudiy Tech Blog
https://github.com/kazuyaseki/code-transformer-for-Figma
Auto Layout が使われていないとレイアウトの情報が分からなかったり、変なレイヤー構造で作られていると(リストなものが一つのテキストで作られてたりね)、それがそのまま出力されるコードにも反映されてしまいます。
本プラグインを使っていく上でネックになるのが「デザインをしっかり作る」ことです。
Figmaのデザインをしっかり作る
DesignLint の拡張
デザインリファクタをワークフローに取り入れる
より良いデザインプロセスを問い続ける
GraphQL query をレイヤーに保存する
ChatGPTはコンポーネントのコードを渡してあげればStorybookも書いてくれる
関連
FigPilot